iT邦幫忙

2023 iThome 鐵人賽

DAY 18
0

Vue.js 提供了一套生命周期方法,這些方法允許你在 Vue 實例不同階段執行代碼。Vue 實例有以下生命周期鉤子:

  • beforeCreate:在 Vue 實例初始化之後,但是在實例被創建之前立即被調用。這個階段主要用於初始化資料、事件等,但是 Vue 實例還未被創建,所以無法訪問 data、methods 等屬性和方法
  • created:在 Vue 實例創建完成後立即被調用。這個階段 Vue 實例已經被創建,可以訪問 data、methods 等屬性和方法,但是還未被掛載到 DOM
  • beforeMount:在 Vue 實例掛載到 DOM 之前被調用。這個階段 Vue 實例已經被創建,並且處於 render 函數之前,但是還未被掛載到 DOM
  • mounted:在 Vue 實例被掛載到 DOM 之後立即被調用。這個階段 Vue 實例已經被掛載到 DOM,可以訪問 DOM 元素,進行 DOM 操作等
  • beforeUpdate:在數據更新之前被調用,這個階段數據已經被改變,但是 DOM 還未重新渲染
  • updated:在數據更新之後被調用,這個階段數據已經被改變,DOM 也已經重新渲染
  • beforeDestroy:在 Vue 實例被銷毀之前被調用。在這個階段,Vue 實例還是可以訪問到 data、methods 等屬性和方法
  • destroyed:在 Vue 實例被銷毀之後被調用。在這個階段,Vue 實例已經被完全銷毀,所有事件監聽器和子組件也都被銷毀

生命周期方法提供了在 Vue 實例不同階段執行代碼的能力,這可以幫助你在應用程序的生命週期內執行不同的邏輯,例如初始化資料、監聽事件、執行非同步操作等


上一篇
Day 17:Vue觀念篇 - Vue.js是什麼?
下一篇
Day 19:Vue觀念篇 - Composition API是什麼?
系列文
30天挑戰:從無到有,使用Vue.js和.NET建立一個Web登入系統19
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言